import React ,{Component} from 'react'
import Bubble from './Bubble.js';
import { pxToRem, pxToPx,transformUnit } from '../../utils/adaptive.js';
// import d3 from 'd3'


export default class Bubbles extends Component{
    static defaultProps = {
      label: '累计利润贡献',
      value: '2018/09/10',
      title: '大连大学附属新华医院',
      showTitle:false,
      scale:0.8,//缩放大小
    }
    constructor(props) {
        super(props);
    
        this.state = {
            showTitleIndex:0,
        };
        this.showTitleIndex = 0 ;
        //页面单位
        this.unit = window.om.unit;
        this.viewWidth = window.om.viewWidth ;
        this.viewHeight = window.om.viewHeight ;
        this.random = "a"+Math.random().toString().substring(2,6);
        this.keyMap={
            client_back: "累计回款",
            client_cost: "累计费用",
            client_income: "累计收入",
            client_people: "累计投入人数",
            // client_profit: "累计利润",
            client_sign: "累计签约",
            client_signtime: "最早签约时间",
            client_signtimes: "签约次数",
            hosp_name: "客户名称",
        }
        this.currentIndex = 0 ;//当前显示第一个坐标数据
        this.coordinate = [
            [
                {
                    x:0.59,
                    y:9.3,
                    scale:0.44,
                },
                {
                    x:2.71,
                    y:2.6,
                    scale:1,
                },
                // {
                //     x:7.62,
                //     y:11.95,
                //     scale:0.33,
                // },
                {
                    x:9.4,
                    y:11.95,
                    scale:0.4,
                },
                {
                    x:10.4,
                    y:5.57,
                    scale:0.51,
                },
                {
                    x:15.4,
                    y:10.35,
                    scale:0.39,
                },
                {
                    x:14.4,
                    y:4.29,
                    scale:0.33,
                },
                {
                    x:16.57,
                    y:7.13,
                    scale:0.25,
                },
            ],
            [
                {
                    x:8,
                    y:10.95,
                    scale:0.44,
                },
                {
                    x:2.31,
                    y:2,
                    scale:1,
                },
                {
                    x:0.59,
                    y:5,
                    scale:0.33,
                },
                {
                    x:8.4,
                    y:4.95,
                    scale:0.4,
                },
                {
                    x:11.4,
                    y:6.9,
                    scale:0.51,
                },
                {
                    x:15.7,
                    y:10.35,
                    scale:0.39,
                },
                {
                    x:14.4,
                    y:4.29,
                    scale:0.33,
                },
                // {
                //     x:1.1,
                //     y:10.13,
                //     scale:0.25,
                // },
            ],
            [
                {
                    x:1.1,
                    y:10.95,
                    scale:0.32,
                },
                {
                    x:2.81,
                    y:5,
                    scale:0.51,
                },
                {
                    x:0.89,
                    y:5,
                    scale:0.32,
                },
                // {
                //     x:6.5,
                //     y:2.55,
                //     scale:0.4,
                // },
                {
                    x:8.4,
                    y:3.3,
                    scale:1,
                },
                {
                    x:5.7,
                    y:10.35,
                    scale:0.39,
                },
                {
                    x:14.4,
                    y:4.29,
                    scale:0.33,
                },
                {
                    x:15.1,
                    y:10.13,
                    scale:0.45,
                },
            ],
            [
                {
                    x:3.1,
                    y:11.95,
                    scale:0.31,
                },
                {
                    x:1.11,
                    y:4,
                    scale:0.51,
                },
                // {
                //     x:0.89,
                //     y:9,
                //     scale:0.32,
                // },
                {
                    x:6.5,
                    y:2.55,
                    scale:0.4,
                },
                {
                    x:12.4,
                    y:3.3,
                    scale:1,
                },
                {
                    x:6.2,
                    y:10.35,
                    scale:0.39,
                },
                {
                    x:10.4,
                    y:2.99,
                    scale:0.33,
                },
                {
                    x:9.1,
                    y:8.13,
                    scale:0.45,
                },
            ],
            [
                // {
                //     x:16.1,
                //     y:12.35,
                //     scale:0.39,
                // },
                {
                    x:2.81,
                    y:4,
                    scale:0.51,
                },
                {
                    x:0.89,
                    y:12,
                    scale:0.42,
                },
                {
                    x:6.5,
                    y:2.55,
                    scale:0.4,
                },
                {
                    x:8.2,
                    y:3.1,
                    scale:1,
                },
                {
                    x:4.5,
                    y:11.35,
                    scale:0.44,
                },
                {
                    x:15.7,
                    y:2.1,
                    scale:0.53,
                },
                {
                    x:14.1,
                    y:8.13,
                    scale:0.45,
                },
            ],
            [
                {
                    x:6.8,
                    y:3.1,
                    scale:1,
                },
                {
                    x:2.81,
                    y:10,
                    scale:0.51,
                },
                {
                    x:0.89,
                    y:3,
                    scale:0.42,
                },
                {
                    x:4.5,
                    y:3.55,
                    scale:0.4,
                },
                // {
                //     x:15.8,
                //     y:12.35,
                //     scale:0.39,
                // },
                {
                    x:12.5,
                    y:11.35,
                    scale:0.44,
                },
                {
                    x:15.2,
                    y:2.79,
                    scale:0.53,
                },
                {
                    x:12.1,
                    y:5.13,
                    scale:0.45,
                },
            ],
            [
                {
                    x:6.2,
                    y:1.9,
                    scale:1,
                },
                {
                    x:0.79,
                    y:2.8,
                    scale:0.51,
                },
                {
                    x:1.7,
                    y:10.5,
                    scale:0.42,
                },
                {
                    x:4.3,
                    y:11.35,
                    scale:0.4,
                },
                // {
                //     x:15.8,
                //     y:2.7,
                //     scale:0.39,
                // },
                {
                    x:11.5,
                    y:12.35,
                    scale:0.44,
                },
                {
                    x:14.9,
                    y:8.29,
                    scale:0.53,
                },
                {
                    x:12.7,
                    y:4.13,
                    scale:0.45,
                },
            ],
            [
                {
                    x:10.2,
                    y:2.1,
                    scale:1,
                },
                {
                    x:15.79,
                    y:2.5,
                    scale:0.51,
                },
                {
                    x:1.7,
                    y:10.5,
                    scale:0.42,
                },
                {
                    x:8.1,
                    y:11.35,
                    scale:0.4,
                },
                {
                    x:3.8,
                    y:2.7,
                    scale:0.39,
                },
                // {
                //     x:15.7,
                //     y:11.14,
                //     scale:0.44,
                // },
                {
                    x:4.9,
                    y:8.29,
                    scale:0.53,
                },
                {
                    x:7.1,
                    y:3.13,
                    scale:0.45,
                },
            ],
            [
                {
                    x:3.2,
                    y:2.5,
                    scale:1,
                },
                {
                    x:14.29,
                    y:2.8,
                    scale:0.51,
                },
                {
                    x:12.3,
                    y:8.5,
                    scale:0.42,
                },
                {
                    x:1.1,
                    y:11.15,
                    scale:0.4,
                },
                // {
                //     x:8.8,
                //     y:2.9,
                //     scale:0.39,
                // },
                {
                    x:15.7,
                    y:11.14,
                    scale:0.44,
                },
                {
                    x:8.9,
                    y:8.29,
                    scale:0.53,
                },
                {
                    x:0.8,
                    y:4.13,
                    scale:0.45,
                },
            ],
            [
                {
                    x:3.2,
                    y:2.2,
                    scale:1,
                },
                {
                    x:10.29,
                    y:9.8,
                    scale:0.51,
                },
                {
                    x:12.3,
                    y:2.9,
                    scale:0.42,
                },
                {
                    x:1.1,
                    y:3.15,
                    scale:0.4,
                },
                // {
                //     x:14.2,
                //     y:11.5,
                //     scale:0.39,
                // },
                {
                    x:15.7,
                    y:4.84,
                    scale:0.44,
                },
                {
                    x:8.9,
                    y:3.9,
                    scale:0.46,
                },
                {
                    x:0.8,
                    y:10.13,
                    scale:0.47,
                },
            ],
        ]
    }

    componentDidMount(){
        let self = this ;
        this.timer = setInterval(()=>{
            let si =  ++self.showTitleIndex ;
            // console.log(si)
            if(si>=8){
                self.props.refreshTable();
                self.showTitleIndex = 0 ;
                si=0;
            }
            self.setState({showTitleIndex:si}) ;
        }, 3000)
    }

    shouldComponentUpdate(nextProps,nextState){
        if(JSON.stringify(this.props.data)==JSON.stringify(nextProps.data) && JSON.stringify(this.state.showTitleIndex)==JSON.stringify(nextState.showTitleIndex) ){
            return false ;
        }
        return true ;
    }

    componentWillUnmount(){
        if(this.timer){
            clearInterval(this.timer)
        }
    }

    transformUnit(data) {
        if (this.unit == "px") {//固定大小的设计
            if (data.indexOf("vh") != -1) {
                return parseFloat(data) * this.viewHeight + "px";
            } else if (data.indexOf("vw") != -1) {
                return parseFloat(data) * this.viewWidth + "px";
            } else {
                return data;
            }
        } else {//自适应的设计
            return data;
        }
    }

    //生成从minNum到maxNum的随机数,extNum为不包含此数据
    randomNum(minNum,maxNum,extNum){ 
        let num ;
        switch(arguments.length){ 
            case 2: 
                num = parseInt(Math.random()*minNum+1,10) ;
            break; 
            case 3: 
                num = parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
            break; 
                default: 
                    return 0; 
                break; 
        } 
        if(num==extNum){
            return this.randomNum(minNum,maxNum,extNum) ;
        }else{
            return num; 
        }
    }

    geta(element,x,y,scale){
        return (<div style={{position:"absolute",left:x,top:y}}>{element}</div>)
    }

   

    getBubbles2(){
        let items = [];
        this.currentIndex = this.randomNum(0,this.coordinate.length-1,this.currentIndex);
        // this.currentIndex = 3 ;
        let j = 0 ,m = 0 , coordinate = JSON.parse(JSON.stringify(this.coordinate[this.currentIndex]));
        for(let n=0;n<coordinate.length;n++){
            if(coordinate[n].scale==1){
                m = n ;
            }
        }
        let c = coordinate.splice(m, 1) ;
        coordinate.splice(this.showTitleIndex, 0, c[0]);

        if(this.props.data.hasOwnProperty("hosp_name")){
            for(let key in this.props.data){
                if(key !="hosp_name"){
                    items.push(this.geta(
                            <Bubble label={this.keyMap[key]} value={this.props.data[key]} title={this.props.data.hosp_name} showTitle={coordinate[j].scale==1} scale={coordinate[j].scale}/>,
                            this.transformUnit(coordinate[j].x+'vw'),this.transformUnit(coordinate[j].y+'vh')));
                        j++ ;
                }
            }
        }else{
            this.props.refreshTable();
        }
        // if(this.props.data){
        //     for(let d of this.props.data){
        //         items.push(this.geta(
        //             <Bubble label={d.label} value={d.value} title={d.title} showTitle={coordinate[j].scale==1} scale={coordinate[j].scale}/>,
        //             this.transformUnit(coordinate[j].x+'vw'),this.transformUnit(coordinate[j].y+'vh')));
        //         j++ ;
        //     }
        // }
        return items ;
                
    }

    getBubbles(){
        let items = [];
        if(this.props.type==1){
            items.push(this.geta(
                <Bubble label='累计利润贡献' value='1908' title='累计收入' showTitle={false} scale="0.44"/>,
                this.transformUnit('0.59vw'),this.transformUnit('9.3vh')));
            items.push(this.geta(
                <Bubble label='累计利润贡献' value='653' title='大连大学附属新华医院' showTitle={true} scale="1"/>,
                this.transformUnit('2.71vw'),this.transformUnit('2.6vh')));
            items.push(this.geta(
                <Bubble label='累计利润' value='29780' title='累计收入' showTitle={false} scale="0.33"/>,
                this.transformUnit('7.62vw'),this.transformUnit('11.95vh')));
            items.push(this.geta(
                <Bubble label='累计费用' value='377112' title='累计收入' showTitle={false} scale="0.4"/>,
                this.transformUnit('9.4vw'),this.transformUnit('11.95vh')));
            items.push(this.geta(
                <Bubble label='累计回款' value='1205' title='累计收入' showTitle={false} scale="0.51"/>,
                this.transformUnit('10.4vw'),this.transformUnit('5.57vh')));
            items.push(this.geta(
                <Bubble label='累计投入人员' value='298' title='累计收入' showTitle={false} scale="0.39"/>,
                this.transformUnit('12.4vw'),this.transformUnit('10.35vh')));
            items.push(this.geta(
                <Bubble label='最早签约时间' value='2018/09/10' title='累计收入' showTitle={false} scale="0.33"/>,
                this.transformUnit('14.4vw'),this.transformUnit('4.29vh')));
            items.push(this.geta(
                <Bubble label='签约次数' value='58' title='累计收入' showTitle={false} scale="0.25"/>,
                this.transformUnit('16.57vw'),this.transformUnit('7.13vh')));
        }else{
            items.push(this.geta(
                <Bubble label='累计利润贡献' value='1908' title='累计收入' showTitle={false} scale="0.44"/>,
                this.transformUnit('0.59vw'),this.transformUnit('9.3vh')));
            items.push(this.geta(
                <Bubble label='累计利润贡献' value='653' title='大连大学附属新华医院' showTitle={true} scale="1"/>,
                this.transformUnit('2.71vw'),this.transformUnit('2.6vh')));
            items.push(this.geta(
                <Bubble label='累计利润' value='29780' title='累计收入' showTitle={false} scale="0.33"/>,
                this.transformUnit('8.2vw'),this.transformUnit('8.88vh')));
            items.push(this.geta(
                <Bubble label='累计费用' value='377112' title='累计收入' showTitle={false} scale="0.4"/>,
                this.transformUnit('9.5vw'),this.transformUnit('4.5vh')));
            items.push(this.geta(
                <Bubble label='累计回款' value='1205' title='累计收入' showTitle={false} scale="0.51"/>,
                this.transformUnit('11.9vw'),this.transformUnit('6.57vh')));
            items.push(this.geta(
                <Bubble label='累计投入人员' value='298' title='累计收入' showTitle={false} scale="0.39"/>,
                this.transformUnit('14.8vw'),this.transformUnit('9.35vh')));
            items.push(this.geta(
                <Bubble label='最早签约时间' value='2018/09/10' title='累计收入' showTitle={false} scale="0.33"/>,
                this.transformUnit('14.4vw'),this.transformUnit('3.29vh')));
            items.push(this.geta(
                <Bubble label='签约次数' value='58' title='累计收入' showTitle={false} scale="0.25"/>,
                this.transformUnit('16.57vw'),this.transformUnit('7.13vh')));
        }

        return items ;
        
                
    }


    render(){
        return (
            <div id={this.random} style={{position:"absolute",left:`${pxToRem(25)}`}}>
                {
                    this.getBubbles2()
                }
            </div>
        )
    }
}